<!--类型字典管理-->
<template>
  <section class="webview fixHeight">
    <el-scrollbar style="height:100%">
      <el-form ref="form" :model="detail" label-width="80px" class="form">
        <el-form-item label="标题">
          <el-input v-model="detail.title" />
        </el-form-item>
		<el-form-item  label="上传图片">
		  <div class="picList" v-if="detail.imgLink.length != 0 ">
		    <div class="item" v-for="(l,index) in detail.imgLink" :key='index'>
		      <img class="pic" :src="l" alt>
		      <i class="el-icon-delete delIcon hand" @click="handleRemove(index)" />
		    </div>
		  </div>
		  <div class="item itemNo"  v-if="detail.imgLink.length < 2 ">
		    <el-upload
		      :action="Is.sevenDomain"
		      :multiple="false"
		      name="file"
		      :limit="2"
		      :show-file-list="false"
		      :on-success="(res)=>handleSuccess(res)"
		    >
		      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传2张，且不超过10M</div>
		      <div class="el-upload el-upload--picture-card">
		        <i slot="default" class="el-icon-plus" />
		      </div>
		    </el-upload>
		  </div>
		</el-form-item>
        <el-form-item label="序列号">
          <el-input v-model="detail.simplify" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model="detail.sort"
            @input="detail.sort = detail.sort.replace(/[^\.\d]/g,'').replace('.','')"
          />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio v-model="detail.isUse" :label="true">启用</el-radio>
          <el-radio v-model="detail.isUse" :label="false">禁用</el-radio>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="detail.remark" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="cancel">返回</el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </section>
</template>
<script>
import { typeAddSon, typeUpdateSon } from '@/api/api'
export default {
  data() {
    return {
      detail: {
        'affiliationType': 0,
        'isUse': true,
        'remark': '',
        'simplify': '',
        'sort': 0,
        'title': '',
        'typeId': this.$route.query.typeId,
		'imgLink':[]
      }
    }
  },
  created() {
    if (this.$route.query.item) {
      this.detail = JSON.parse(this.$route.query.item)
      this.detail.imgLink = JSON.parse(this.$route.query.item).imgLink.split(",")
	  console.log(JSON.parse(this.$route.query.item).imgLink)
      console.log(this.detail)
    }
  },
  methods: {
	  handleRemove(index) {
	    this.detail.imgLink.splice(index,1)
	  },
	  // 上传成功之后的回调
	  handleSuccess(res, type) {
	    if (res.code === 200) {
	      this.detail.imgLink.push(res.data);
		  console.log(this.detail.imgLink)
	    }
	  },
    // 添加/编辑
    submit() {
		
    // 验证不通过则不提交
	 this.detail.imgLink= this.detail.imgLink.join(',')
      if (!this.vertify()) {
        return false
      }
      if (this.$route.query.item) {
        // 编辑
        typeUpdateSon(this.detail).then(data => {
          Is.tip('编辑成功', 2000, 'success')
          this.$router.back()
        })
      } else {
        // 新增
        typeAddSon(this.detail).then(data => {
          Is.tip('添加成功', 2000, 'success')
          this.$router.back()
        })
      }
    },
    // 返回
    cancel() {
      this.$router.back()
    },
    vertify() {
      if (Is.empty(this.detail.title)) {
        Is.tip('请输入标题')
        return false
      }
      if (Is.empty(this.detail.simplify)) {
        Is.tip('请输入序列号')
        return false
      }
      if (Is.empty(this.detail.sort)) {
        Is.tip('请输入排序')
        return false
      }
      return true
    }
  }}
</script>
